import React, { PureComponent } from 'react'
import { View, Text, ListView, Image, TouchableOpacity } from 'react-native'
import * as _ from 'lodash'
import PropTypes from 'prop-types'
import RefreshListView from "../../widgets/RefreshListView"
import {connect} from 'react-redux'
import color from '../../utils/color'
import { createAction, NavigationActions } from '../../utils'
import { BackIcon, PullView } from '../../widgets'
import screen from '../../utils/screen'

const liuyanImg = require('../../images/consultant/liuyan.png')
const writeImg = require('../../images/consultant/write.png')

class InnerCell extends PureComponent {
  static propTypes = {
    v: PropTypes.any
  }
  constructor(props) {
    super(props)
    this.state = {
      showResp: false
    }
  }
  render() {
    const { v } = this.props
    return (
      <View style={{paddingVertical:screen.pxToDp(20)}}>
        <View style={{paddingVertical: screen.pxToDp(5)}}>
          <Text>{v.content || ''}</Text>
        </View>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          <Text>{v.createTime || ''}</Text>
          <TouchableOpacity onPress={() => {this.setState({showResp: !this.state.showResp})}}>
            <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center'}}>
                <Image source={liuyanImg} style={{height:screen.pxToDp(35), width: screen.pxToDp(35)}}/>
                <Text style={{marginLeft: screen.pxToDp(8)}}>{v.times}</Text>
            </View>
          </TouchableOpacity>
        </View>
        {
          this.state.showResp && (
            <View style={{paddingHorizontal: screen.pxToDp(30), backgroundColor: '#ebebeb'}}>
              {
                _.map(v.commemtList || [], (vv, j) => {
                  return (
                    <View key={j}>
                      <View style={{paddingVertical: screen.pxToDp(5)}}>
                        <Text>{vv.content || ''}</Text>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <Text>{vv.createTime || ''}</Text>
                      </View>
                    </View>
                  )
                })
              }
            </View>
          )
        }
      </View>
    )
  }
}

@connect(({ consultant, loading }) => ({ ...consultant, isLoading: loading.models.consultant }))
export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title:navigation.state.params.codeName,
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })
  constructor(props) {
    super(props)
    this.listView = null
  }

  componentWillMount() {
    this.props.dispatch(createAction("consultant/resetOneDetail")({}))
  }

  componentDidMount() {
    this.listView && this.listView.startFooterRefreshing()
  }

  componentWillReceiveProps(nextProps) {
    const resetData = nextProps.resetData
    if(resetData) {
      this.props.dispatch(createAction("consultant/modifyState")({
        resetData: false,
      }))
      this.props.dispatch(createAction("consultant/resetOneDetail")({}))
      this.listView && this.listView.startFooterRefreshing()
    }
    console.log('first new props reset Data is ', nextProps.resetData)
  }

  requestData = () => {
    const params  = this.props.navigation.state.params || {}
    this.props.dispatch(createAction("consultant/getFirstDetail")({
      listView: this.listView,
      type: params.type || 0,
      projectId: params.projectId || ''
    }))
  }

  renderCell = (v) => {
    return (
      <InnerCell v={v}/>
    )
  }

  render() {
    const params  = this.props.navigation.state.params || {}
    const { dataSource } = this.props
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <RefreshListView
          style={{paddingHorizontal: screen.pxToDp(30)}}
          ref={(e) => this.listView = e}
          dataSource={dataSource}
          renderHeader={() => {}}
          renderRow={(rowData) => {
            return (
              this.renderCell(rowData)
            )
          }}
          onHeaderRefresh={this.requestData}
          onFooterRefresh={this.requestData}
        />
        <View style={{height: screen.pxToDp(100), flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
          <Image source={writeImg} style={{height: screen.pxToDp(50), width: screen.pxToDp(50)}}/>
          <TouchableOpacity onPress={() => {
            this.props.navigation.navigate('MessageStack', {
              type: params.type || 0,
              projectId: params.projectId || '',

            })
          }}><Text>发布新留言</Text></TouchableOpacity>
        </View>
      </View>
    )
  }
}
